<template>
    <div class="left">
        <ul>
            <li
                v-for="item in list"
                :key="item.id"
                @click="changeLi(item.id)"
                :class="liId == item.id ? 'li-color' : ''"
            >
                {{ item.name }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    id: 1,
                    name: '用户信息'
                },
                {
                    id: 2,
                    name: '视频信息'
                },
                {
                    id: 3,
                    name: '客户信息'
                }
            ],
            liId: 1
        };
    },
    components: {},
    methods: {
        changeLi(i) {
            this.liId = i;
            if (i == 1) {
                this.$router.push('/user');
            } else if (i == 2) {
                this.$router.push('/video');
            } else {
                this.$router.push('/info');
            }
        }
    }
};
</script>

<style scoped lang="scss">
.left {
    width: 200px;
    height: calc(100vh - 60px);
    background: #b8b8b8;
    ul {
        margin-top: 30px;
        li {
            margin: 10px 0;
            cursor: pointer;
        }
        .li-color {
            color: red;
        }
    }
}
</style>
